<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form ref="filters" :model="filters" label-width="120px">
                <div class="filter-container">
                    <el-form-item label="Department:" class="filter-item">
                        <el-select
                                v-model="selectfilters.department"
                                filterable
                                @change="selectTrigger(selectfilters.department)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.department"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Section:" class="filter-item">
                        <el-select
                                v-model="selectfilters.section"
                                filterable
                                @change="selectTrigger(selectfilters.section)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.section"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="CET:" class="filter-item">
                        <el-select
                                v-model="selectfilters.cet"
                                filterable
                                @change="selectTrigger(selectfilters.cet)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.cet"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Filter Plan:" class="filter-item">
                        <el-select
                                v-model="selectfilters.filterplan"
                                filterable
                                @change="selectTrigger(selectfilters.filterplan)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.filterplan"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Tool:" class="filter-item">
                        <el-select
                                v-model="selectfilters.tool"
                                filterable
                                @change="selectTrigger(selectfilters.tool)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.tool"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="CMT:" class="filter-item">
                        <el-select
                                v-model="selectfilters.cmt"
                                filterable
                                @change="selectTrigger(selectfilters.cmt)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.cmt"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="Chamber:" class="filter-item">
                        <el-select
                                v-model="selectfilters.chamber"
                                filterable
                                @change="selectTrigger(selectfilters.chamber)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.chamber"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="Recipe Alias:" class="filter-item">
                        <el-select
                                v-model="selectfilters.recipealias"
                                filterable
                                @change="selectTrigger(selectfilters.recipealias)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.recipealias"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="Recipe Name:" class="filter-item">
                        <el-select
                                v-model="selectfilters.recipename"
                                filterable
                                @change="selectTrigger(selectfilters.recipename)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.recipename"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="Sensor Alias:" class="filter-item">
                        <el-select
                                v-model="selectfilters.sensoralias"
                                filterable
                                @change="selectTrigger(selectfilters.sensoralias)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.sensoralias"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="Window:" class="filter-item">
                        <el-select
                                v-model="selectfilters.window"
                                filterable
                                @change="selectTrigger(selectfilters.window)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.window"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="Static:" class="filter-item">
                        <el-select
                                v-model="selectfilters.static"
                                filterable
                                @change="selectTrigger(selectfilters.static)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.static"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="UCL:" class="filter-item">
                        <el-input v-model="selectfilters.ucl" placeholder :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="LCL:" class="filter-item">
                        <el-input v-model="selectfilters.lcl" placeholder :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="Target:" class="filter-item">
                        <el-input v-model="selectfilters.target" placeholder :disabled="true"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="Use Target:" class="filter-item">
                        <el-input v-model="selectfilters.target" placeholder></el-input>
                    </el-form-item>

                    <el-form-item label="Programme:" class="filter-item">
                        <el-select
                                v-model="selectfilters.programmes"
                                filterable
                                @change="selectTrigger(selectfilters.programmes)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.programmes"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="A:" class="filter-item">
                        <el-input v-model="anum" size placeholder=""></el-input>
                        <!-- <el-input-number v-model="anum" size="mini" :precision="2" :step="0.1" :max="1"></el-input-number> -->
                    </el-form-item>
                    <el-form-item label="C:" class="filter-item">
                        <el-input v-model="anum" size placeholder=""></el-input>
                        <!-- <el-input-number v-model="anum" size="mini" :precision="2" :step="0.1" :max="1"></el-input-number> -->
                    </el-form-item>

                    <el-form-item label="D:" class="filter-item">
                        <el-input v-model="anum" size placeholder=""></el-input>
                        <!-- <el-input-number v-model="anum" size="mini" :precision="2" :step="0.1" :max="1"></el-input-number> -->
                    </el-form-item>
                    <el-form-item label="E:" class="filter-item">
                        <el-input v-model="anum" size placeholder=""></el-input>
                        <!-- <el-input-number v-model="anum" size="mini" :precision="2" :step="0.1" :max="1"></el-input-number> -->
                    </el-form-item>
                    <el-form-item label="Date:" class="filter-item">
                        <el-date-picker
                                v-model="selectfilters.date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>

                    <el-form-item label="Wafer:" class="filter-item">
                        <el-select
                                v-model="selectfilters.programmes"
                                filterable
                                @change="selectTrigger(selectfilters.programmes)"
                                placeholder="Select"
                        >
                            <el-option
                                    v-for="item in filters.programmes"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                        <el-button type="primary">Search</el-button>
                        <el-button type="primary">Demo Trial</el-button>
                </div>
                <div class="chartbox">
                    <div id="myChart" style="width: 1200px;height: 550px"></div>
                </div>
                <div class="btcommit">
                    <el-button size="large" type="primary">Commit</el-button>
                </div>
            </el-form>
        </div>

        <div></div>
    </div>
</template>

<script>
    import {getTypeSetup} from "../../api/api"
    export default {
        // components: {Linechart},
        data() {
            return {
                id: "id",
                anum: "0",
                selectfilters: {
                    department: "",
                    section: "",
                    cet: "",
                    filterplan: "",
                    tool: "",
                    cmt: "",
                    chamber: "",
                    recipealias: "",
                    recipename: "",
                    sensoralias: "",
                    window: "",
                    static: "",
                    ucl: "",
                    lcl: "",
                    target: "",
                    usetarget: "",
                    programmes: "",
                    wafers: "",
                    date: ""
                },
                filters: {
                    department: [{value: "DNS1"}, {value: "DNS2"}],
                    section: [{value: "sec1"}, {value: "sec2"}, {value: "sec3"}],
                    cet: [{value: "cet1"}, {value: "cet2"}],
                    tool: [{value: "fp1"}, {value: "fp2"}],
                    cmt: [{value: "fp1"}, {value: "fp2"}],
                    chamber: [{value: "fp1"}, {value: "fp2"}],
                    recipealias: [{value: "fp1"}, {value: "fp2"}],
                    recipename: [{value: "fp1"}, {value: "fp2"}],
                    sensoralias: [{value: "fp1"}, {value: "fp2"}],
                    window: [{value: "fp1"}, {value: "fp2"}],
                    static: [{value: "fp1"}, {value: "fp2"}],
                    ucl: [{value: "fp1"}, {value: "fp2"}],
                    lcl: [{value: "fp1"}, {value: "fp2"}],
                    target: [{value: "fp1"}, {value: "fp2"}],
                    usetarget: [{value: "fp1"}, {value: "fp2"}],
                    programmes: [{value: "pg1"}, {value: "pg2"}],
                    wafers: [{value: "fp1"}, {value: "fp2"}],
                    date: ""
                },

                parameter: {},
                pickerOptions: {    //日期禁选项
                    disabledDate(time) {
                        return time.getTime() < this.selectfilters.date[0] || time.getTime() > this.selectfilters.date[1];
                    }
                }
            };
        },
        mounted() {
            this.drawLine();
        },
        computed: {
            pickerOptions() {
                return {
                    disabledDate(time) {
                        let maxDate = Date.parse(this.selectfilters[1]);      //YYYY-MM-DD转为毫秒级时间戳
                        let minDate = Date.parse(this.selectfilters[0])   //
                        return time.getTime() >= maxDate || time.getTime() <= minDate;
                    }
                }
            }
        },
        methods: {
            selectTrigger(val) {
                console.log(val, "show val");
                console.log(this.selectfilters, "show me selectfilters");
            },

            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("myChart"));

                let dataxaxias = [], datayaxias1 = [], datayaxias2 = [], datayaxias3 = [], datayaxias4 = [],
                    datayaxias5 = [];
                for (let i = 0; i < 40; i++) {
                    dataxaxias.push(i);
                    datayaxias1.push(Math.round(Math.random() * 100));
                    datayaxias2.push(Math.round(Math.random() * 100));
                    datayaxias3.push(Math.round(Math.random() * 100));
                    datayaxias4.push(Math.round(Math.random() * 100));
                    datayaxias5.push(Math.round(Math.random() * 100));
                }
                let params = {
                    dataxaxis: dataxaxias,
                    datalist: [
                        {
                            name: 'data1',
                            data: datayaxias1
                        },
                        {
                            name: 'data2',
                            data: datayaxias2
                        },
                        {
                            name: 'data3',
                            data: datayaxias3
                        },
                        {
                            name: 'data4',
                            data: datayaxias4
                        },
                        {
                            name: 'data5',
                            data: datayaxias5
                        }
                    ]
                }
                var optionline = {
                    title: {
                        text: 'Model Calculus'
                    },
                    color: ['#458FE3', '#48C964', '#FFAE37', '#FB8989', '#CA89FB'],
                    legend: {
                        data: []
                    },
                    tooltip: {
                        trigger: "axis"
                    },
                    xAxis: {
                        type: 'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: []
                }

                optionline.xAxis.data = params.dataxaxis;
                for (let i in params.datalist) {
                    optionline.legend.data.push(params.datalist[i].name),
                        optionline.series.push({
                            name: params.datalist[i].name,
                            smooth: true,
                            type: "line",
                            data: params.datalist[i].data,
                        })
                }
                // 绘制图表
                myChart.setOption(optionline);
            }
        }
    };
</script>

<style>
    .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }
    .chartbox {
        padding-top: 30px;
        /*padding-left: 80px;*/
        /*margin: 0 auto;*/
        text-align: center;
    }

    .btcommit {
        text-align: center;
        padding: 40px;
    }
</style>
